/**
2021-11-26
登录界面：
  用户进入该界面首先获取验证码图片，服务器生成验证码图片后会将验证码图片存储到session中，
  用户填写用户名、密码、验证码
  服务器对用户信息进行校验，首先判断验证码信息是否正确，然后判断用户名和密码是否匹配
技术点：
  md5加密、spring security登录验证、spring security验证码验证、生成验证码、session
 */
<template>
  <div id="body">
    <div>
      <img :src="imgUrl" class="background" />
    </div>
    <div id="loginForm">
      <div style="text-align:center;margin-bottom:15px">登录信息</div>
      <el-form :model="formLogin" ref="formLogin" :rules="rules" :show-message="false">
        <el-form-item style="margin-bottom:5px" prop="username">
          <el-input v-model="formLogin.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:5px" prop="rawPassword">
          <el-input v-model="formLogin.rawPassword" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:5px" :gutter="20" prop="verCode">
          <el-col :span="15">
            <el-input v-model="formLogin.verCode" placeholder="验证码(点击图片刷新)"></el-input>
          </el-col>
          <el-col :span="9">
            <img
              id="verCodeImage"
              ref="verCodeImage"
              @click="changeCode()"
              :src="this.GLOBAL.BASE_URL + 'userOperation/getVerPic'"
            />
          </el-col>
        </el-form-item>
        <el-button :plain="true" @click="login('formLogin')" id="button_login">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  data() {
    var checkUserName = (rule, value, callback) => {
      if (
        value == null ||
        value == undefined ||
        value == "" ||
        value.length < 5
      ) {
        this.$message({
          message: "用户名信息不合法（大于6字节）",
          type: "error",
        });
        return callback(new Error("用户名信息不合法（大于6字节）"));
      }
      callback();
    };
    var checkPassword = (rule, value, callback) => {
      if (
        value == null ||
        value == undefined ||
        value == "" ||
        value.length < 6
      ) {
        this.$message({
          message: "密码信息不合法",
          type: "error",
        });
        return callback(new Error("密码信息不合法"));
      }
      callback();
    };
    var checkVerCode = (rule, value, callback) => {
      if (value == null || value == undefined || value == "") {
        this.$message({
          message: "验证码不能为空！",
          type: "error",
        });
        return callback(new Error("验证码不能为空！"));
      }
      callback();
    };
    return {
      formLogin: {
        username: "",
        password: "",
        rawPassword: "",
        verCode: "",
      },
      rules: {
        username: [{ validator: checkUserName, trigger: "blur" }],
        rawPassword: [{ validator: checkPassword, trigger: "blur" }],
        verCode: [{ validator: checkVerCode, trigger: "blur" }],
      },
      imgUrl: require("../../assets/login_background.png"),
    };
  },
  methods: {
    changeCode() {
      this.$refs.verCodeImage.src =
        this.GLOBAL.BASE_URL + "userOperation/getVerPic";
    },
    login(formLogin) {
      this.$refs[formLogin].validate((valid) => {
        if (valid) {
          //密码md5加密传输
          this.formLogin.password = md5(this.formLogin.rawPassword);
          console.log(md5(this.formLogin.password));
          this.COMMON.httpPost(
            this,
            "login",
            this.formLogin,
            (result) => {
              if (result.result == "SUCCESS") {
                //将用户信息存储到本地
                localStorage.user = JSON.stringify(result.data || []);
                 debugger;
                //进入主界面
                this.$router.push({ path: "/home" });
              } else {
                this.changeCode();
                this.formLogin.password = "";
                this.formLogin.verCode = "";
              }
            },
            (result) => {}
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>



<style>
body {
  margin: 0px;
  padding: 0;
}
#body {
  height: 100%;
  width: 100%;
}
#loginForm {
  background-color: white;
  margin: auto;
  width: 20%;
  height: 30%;
  position: relative;
  top: 50%; /*偏移*/
  transform: translateY(-50%);
  box-shadow: 10px 10px 10px #7b94f9;
  padding-top: 20px;
  padding-bottom: 50px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 10px;
}
#button_login {
  width: 100%;
  border: 1px solid #879399;
}
.background {
  height: 100%;
  width: 100%;
  position: absolute;
}
.el-form-item__label {
  color: black;
}
</style>